<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>继续教育管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				<a @click="goback">
					<el-button type="text" icon="el-icon-arrow-left">返回</el-button>
				</a>
			</div>
			<div class="pd10">
				<el-form ref="form" :model="form" label-width="120px">
					<el-form-item label="缩略图：">
						<el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess">
							<img v-if="pic" :src="pic" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="视频：">
						<el-upload class="avatar-uploader el-upload--text" :action="ImgApiMore" :show-file-list="false" :on-success="handleVideoSuccess"
						 :before-upload="beforeUploadVideo">
							<video v-if="video" :src="video" class="avatar" controls="controls"></video>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="视频标题：">
						<el-input type="text" v-model="form.eeTitle" style="width:300px;" ></el-input>
						{{form.eeIsDt}}
						<el-checkbox v-model="form.eeIsDt" class="ml10" :true-label="1" :false-label="0">设为投连产品</el-checkbox>
					</el-form-item>
					<el-form-item label="类别：">
						<el-select v-model="form.eduType" placeholder="类别">
							<el-option :label="item.etypeTitle" :value="item.etypeId" v-for="item in categoryArr" :key="item.etypeId"></el-option>
						</el-select>
					</el-form-item>
					<div v-for="(item,index) in titleArr">
						<el-form-item :label="'题目'+Number(index+1)+'：'">
							<div>
								<span @click="editQuestion(item,index)">
									{{item.title}} &nbsp;&nbsp; 分值:{{item.score}}
								</span>
								<el-button size="small" class="exitbtn ml10" type="primary" @click="titleDelete(index)">删除该题</el-button>
							</div>
							<div>
								<p v-for="(itemson,index2) in item.answers" :class="itemson.multiple==true?'color-67C23A':''">{{itemson.letter}}:{{itemson.answer}}
									<i class="el-icon-check" v-if="itemson.multiple==true"></i></p>
							</div>
						</el-form-item>
					</div>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="addTitle">添加题目</el-button>
					</el-form-item>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="onSubmit">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 添加题目 -->
			<el-dialog title="添加题目" :visible.sync="dialogFormVisible">
				<el-form :model="titleForm" label-width="120px">
					<el-form-item label="题目:">
						<el-input v-model="titleForm.title" autocomplete="off" style="width:300px;" placeholder="请输入题目"></el-input>
					</el-form-item>
					<el-form-item label="该题分值:">
						<el-input type="number" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" v-model="titleForm.score"
						 autocomplete="off" style="width:300px;" placeholder="请输入分值"></el-input>
						<div class="answer">
							<div class="li" v-for="(item,index) in titleForm.answers">
								<span>{{item.letter}}:</span>
								<el-input v-model="item.answer" autocomplete="off" style="width:270px;" placeholder="请输入答案"></el-input>
								<i class="el-icon-delete" @click="answerDelete(index)"></i>
								<el-checkbox v-model="item.multiple" style="margin-left:20px;" @change="correctAnswer">设置正确答案</el-checkbox>
							</div>
							<div class="li">
								<span></span>
								<el-button class="exitbtn" type="primary" @click="addAnswer">添加答案项</el-button>
								<el-checkbox v-model="titleForm.multiple" style="margin-left:20px;">设置为多选题</el-checkbox>
							</div>
						</div>
					</el-form-item>
				</el-form>
				<div class="dialog-footer text-r">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onTitleSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					eeId: "",
					etId:"",
					video:"",
					ImgbaseUrl: ImgbaseUrl,
					ImgApiMore: uploadPic,
					pic: "",
					categoryArr: [],
					form: {
						comm:"", //普通分数
						dt:0,  //连投分数
						etId:"",
						eeVider:"",  //视频地址
						eeTitle:"标题",
						eeImg:"", //缩略图
						eeIsDt: 0,  //是否连投  0否 1是
						eduType:"",   //类型
						eeScore:"",  //本视频题目总分数
						eeTime:null,
					},
					// 添加题目
					dialogFormVisible: false,
					titleForm: {
						title: "",
						score: "",
						correct: "", //正确答案索引
						multiple: "", //是否多选
						// 添加答案项
						answers: [
							{
								letter:"A",
								multiple: false,
								answer: "",
							}, {
								letter:"B",
								multiple: false,
								answer: "",
							}, {
								letter:"C",
								multiple: false,
								answer: "",
							}, {
								letter:"D",
								multiple: false,
								answer: "",
							},
						]
					},
					// 回显题目列表
					titleArr:[],
					// 是添加 还是编辑
					title:"",
					isAddOrEdit:0,   // 0添加  1编辑
					isEditIndex:""
				}
			},
			methods: {
				geteduTypeList:function(){
					eduTypeList({}).then(res=>{
						if(res.data.code==0){
							this.categoryArr = res.data.data
						}
					})
				},
				goback:function(){
					window.location.href = 'education.html?etId='+this.etId;//此处拼接内容
				},
				// 验证视频格式和视频大小
				beforeUploadVideo(file) {
					const isLt10M = file.size / 1024 / 1024 < 10;
					if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv','video/wav', 'video/rmvb'].indexOf(file.type) == -1) {
						this.$message.error('请上传正确的视频格式');
						return false;
					}
				},
				// 上传成功
				handleVideoSuccess(res, file) { //获取上传图片地址
					console.log('======',res)
					if (res.code == 0) {
						this.form.eeVider = res.path;
						this.video = ImgbaseUrl+res.path
						console.log(this.video)
					} else {
						this.$message.error('视频上传失败，请重新上传！');
					}
				},
				/* 单张上传图片 */
				handleAvatarSuccess: function(res, file) {
					console.log("1111222")
                    console.log(file.raw);
					this.pic = URL.createObjectURL(file.raw);
					this.form.eeImg = file.response.path;

				},
				// 添加题目
				addTitle: function() {
					let that = this
					that.isAddOrEdit = 0
					that.title="添加题目"
					that.titleForm.title=""
					that.titleForm.score= "",
					that.titleForm.correct= "", //正确答案索引
					that.titleForm.multiple= "", //是否多选
					that.titleForm.answers= [
						{
							letter:"A",
							multiple: false,
							answer: "",
						}, {
							letter:"B",
							multiple: false,
							answer: "",
						}, {
							letter:"C",
							multiple: false,
							answer: "",
						}, {
							letter:"D",
							multiple: false,
							answer: "",
						},
					],
					that.dialogFormVisible = true
				},
				IsNullAnswer: function() {
					let flag = false;
					if (this.titleForm.title == "") {
						this.$message.warning('题目不能为空');
						return flag = true;
					}
					if (this.titleForm.score == "" || this.titleForm.score == 0) {
						this.$message.warning('请输入正确分值');
						return flag = true;
					}
					for (let i = 0; i < this.titleForm.answers.length; i++) {
						if (this.titleForm.answers[i].answer == "") {
							this.$message.warning('请填写答案');
							return flag = true;
						}
					}
					if (this.titleForm.correct == "") {
						this.$message.warning('请选择正确答案');
						return flag = true;
					}
					let eeIsDt = this.form.eeIsDt //0否 1是
					let comm = Number(this.titleForm.score) + Number(this.form.comm)
					if ( (eeIsDt == 0 && comm > 100) || (eeIsDt == 1 && comm > 110)) {
						this.$message.warning('请重新输入分值');
						return flag = true;
					}
				},
				getDetail:function(){
					examDetail({id:this.eeId}).then(res=>{
						this.form = res.data.data;
						this.form.etId = res.data.data.etId;
						this.pic = ImgbaseUrl +res.data.data.eeImg;
						this.video = ImgbaseUrl + res.data.data.eeVider;
                        this.titleArr = JSON.parse(res.data.data.eeQuestions).questions;
                        console.log("+++++")
                        console.log(res.data)
						console.log(this.form.eeIsDt);
					});
				},
				// 题目总分
				getTotalScore:function(){
					let that = this
					let comm = ""
					for (let i = 0; i < that.titleArr.length; i++) {
						comm = Number(comm) + Number(that.titleArr[i].score)
					}
					that.form.comm = comm
				},
				// 是否多选
				correctAnswer: function() {
					let that = this
					let correct = []
					for (let i = 0; i < that.titleForm.answers.length; i++) {
						if (that.titleForm.answers[i].multiple == true) {
							correct.push(i)
						}
					}
					if (correct.length > 1) {
						that.titleForm.multiple = true
					} else {
						that.titleForm.multiple = false
					}
				},
				onTitleSubmit: function() {
					let that = this;					
					that.getTotalScore()
					
					let correct = []
					for (let i = 0; i < that.titleForm.answers.length; i++) {						
						if (that.titleForm.answers[i].multiple == true) {
							correct.push(i)
						}
					}
					that.titleForm.correct = correct.join(',')
					if (that.IsNullAnswer()) {
						return;
					}
					let params = {
						title:that.titleForm.title,
						score:that.titleForm.score,
						multiple:that.titleForm.multiple,
						correct:that.titleForm.correct,
						answers:that.titleForm.answers
					}
					if(that.isAddOrEdit == 0){
						that.titleArr.push(params)
					}else{
						let index = that.isEditIndex
						that.titleArr[index]=params
					}
					that.dialogFormVisible = false
				},
				// 修改问题
				editQuestion:function(item,index){
					this.dialogFormVisible = true
					this.isAddOrEdit = 1
					this.isEditIndex = index
					this.title="编辑题目"

					this.titleForm.title=item.title
					this.titleForm.score= item.score
					this.titleForm.correct= item.correct //正确答案索引
					this.titleForm.multiple= item.multiple //是否多选
					// this.titleForm.answers= item.answers

					let answers=[]
					for (let i=0;i<item.answers.length;i++){
						let params={
							letter:item.answers[i].letter,
							multiple: item.answers[i].multiple,
							answer: item.answers[i].answer,
						}
						answers.push(params)
					}
					this.titleForm.answers=answers
				},
				titleDelete: function(index) {
					let that = this
					that.$confirm('确认删除该题?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.titleArr.splice(index, 1)
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				addAnswer: function() {
					let params = {
						multiple: false,
						answer: ""
					}
					this.titleForm.answers.push(params)
					this.lists(this.titleForm.answers)
				},
				answerDelete: function(index) {
					let that = this
					that.titleForm.answers.splice(index, 1)
					that.lists(that.titleForm.answers)
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.eeVider == "") {
						this.$message.error('视频不能为空');
						return flag = true;
					}
					if (this.form.eduType == "") {
						this.$message.error('类别不能为空');
						return flag = true;
					}
				},
				onSubmit: function() {
					let that = this;
					// if (that.IsNull()) {
					// 	return;
					// }
					// 视频题目总分数
					that.getTotalScore()
					let eeQuestionsArr={
						questions:this.titleArr
					}
					this.form.eeQuestions = JSON.stringify(eeQuestionsArr)

					if(this.form.eeIsDt==1){
						this.form.dt=this.form.comm;
						this.form.comm = 0;
					}else{
						this.form.dt=0
					}
					delete this.form.eeTime;
					this.form.eeScore= Number(this.form.comm)+Number(this.form.dt)
					console.log(this.form);
					addExam(this.form).then(res=>{
						console.log(res)
						if(res.data.code==0){
							this.$message.success('添加成功')
							window.location.href = 'education.html?etId='+this.etId;//此处拼接内容
						}else{
							this.$message.error(res.data.msg)
						}
					})
				},
				lists(arr) {
					const arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
						'U', 'V', 'W', 'X', 'Y', 'Z'
					]
					for (let i = 0; i < arr.length; i++) {
						arr[i].letter = arr2[i]
					}
				},
				titlelists(arr) {
					let that = this
					for (let i = 0; i < arr.length; i++) {
						that.lists(arr[i].answers)
					}
				}
			},
			created() {
				let that = this
				that.geteduTypeList();
				that.etId = getQueryString("etId");
				that.eeId = getQueryString("eeId");
				if (that.eeId == null) {
					console.log('==添加')
					that.form.etId=this.etId;
				} else {
					//根据ID获取详情
					console.log('==编辑')
					that.getDetail();
				}
				that.lists(that.titleForm.answers)
// 				that.titlelists(that.titleArr)
			},
		});
	</script>
</html>
